<template>
		<!-- 基于 uni-list 的页面布局 -->
		<view style=" position: relative; flex: 1;overflow: hidden;">
			<view direction="row" v-for="(item,index) in data" :key="index"
				:direction="(item.mode === 1 || item.mode === 2 || item.mode === 3 || item.mode === 6) ? 'column' : 'row'">
				<!-- 自定义 header 内容 -->
				<!-- <template v-slot:header> -->
					<view v-if="item.mode !== 4 && item.mode !== 5" class="uni-title">{{ item.title }}</view>
				<!-- </template> -->
				<!-- 自定义 body 内容 -->
				<!-- <template v-slot:body> -->
					<!-- body 决定了列表是否显示多图/大图，以及自定义列表内容 -->
					<view class="content"
						:class="{ 'uni-content': item.mode === 1, 'uni-list-box': item.mode === 2, 'uni-media-box': item.mode === 3 }">
						<!-- 显示大图 -->
						<view v-if="item.mode === 1 || item.mode === 2" class="uni-thumb"
							:class="{ 'uni-content': item.mode === 1, ' list-picture': item.mode === 1 }">
							<image class="thumb-image" :src="item.avatar" mode="aspectFill"></image>
						</view>
						<!-- 显示多图 -->
						<image v-if="item.mode === 3" v-for="(img,index) in item.avatar" :key="index" class="uni-thumb"
							:src="img" mode="aspectFill"></image>
						<!-- 显示自定义内容 -->
						<view class="uni-content">
							<view v-if="item.mode !== 3" class="uni-note">
							{{ item.user_name }}
							{{ item.last_modify_date }}
							</view>
						</view>
					</view>
				<!-- </template> -->
				<!-- 自定义 footer 内容 -->
				<!-- <template v-slot:footer> -->
					<view v-if="item.mode === 3" slot="footer" class="uni-note">
					{{ item.user_name }}
					{{ item.last_modify_date }}
					</view>
				<!-- </template> -->
			</view>
		</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				data: [{
						"avatar": [
							"/static/shouye/v4.png",
							"/static/shouye/v4.png",
							"/static/shouye/v4.png"
						],
						"last_modify_date": "刚刚",
						"mode": 3,
						"title": "盘点那些出现在好莱坞电影里的中国女明星,第7个很多人认不出来",
						"user_name": "淘气电影日报",
					},
					{
						"avatar": [
							"/static/shouye/v4.png",
							"/static/shouye/v4.png",
							"/static/shouye/v4.png"
						],
						"last_modify_date": "刚刚",
						"mode": 3,
						"title": "盘点那些出现在好莱坞电影里的中国女明星,第7个很多人认不出来",
						"user_name": "刘烨电影",
					},
					{
						"avatar": "/static/shouye/v4.png",
						"last_modify_date": "刚刚",
						"mode": 1,
						"title": "信息量巨大！漫威《黑寡妇》全球首支预告：寡姐家人首次亮相，揭开联超A女英雄",
						"user_name": "黑寡妇",
						
					}
				]
			};
		},
		onLoad() {},
		methods: {

		}
	};
</script>

<style lang="scss" scoped>
	@import '@/common/uni-ui.scss';

	// page {
	// 	display: flex;
	// 	flex-direction: column;
	// 	box-sizing: border-box;
	// 	background-color: #efeff4;
	// 	min-height: 100%;
	// 	height: auto;
	// }

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	::v-deep .uni-list-item__container{
	    position: relative;
	    flex: 1;
	    overflow: hidden;
	}
</style>